<template>
    <div class="material">
        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline"
                        @click="$router.push('/customFields/inventoryDetails/create')"
                        :disabled="total == 50">添加新字段</el-button>
                    <div class="tip">
                        <span class="el-icon-warning-outline"></span>
                        <span>最多支持添加50个</span>
                    </div>
                </div>
            </template>
        </custom-setbtn>

        <!-- 表格 -->
        <table-list :tableGroup='tableGroup' ref='tableList' @getTotal='getTotal'>
        </table-list>
    </div>
</template>

<script>
    import tableList from './tableList.vue'
    export default {
        data() {
            return {
                tableGroup: [{
                        label: 'chineseName',
                        name: '字段名称',
                        width: '130'
                    },
                    {
                        label: 'fieldType',
                        name: '字段类型',
                        width: '130'
                    },
                    {
                        label: 'createTime',
                        name: '创建时间',
                        width: '130'
                    },
                    {
                        label: 'createName',
                        name: '创建人',
                        width: '130'
                    },
                    {
                        label: 'updateTime',
                        name: '最后更新时间',
                        width: '130'
                    },
                ],
                total:0
            }
        },
        components: {
            tableList
        },
        methods:{
            getTotal(total){
                this.total = total
            }
        }
    }
</script>

<style lang="less" scoped>
    .material {
        .tip {
            display: inline-block;

            span {
                color: rgb(155, 155, 155);
                margin-left: 2px;
                font-size: 12px;
            }

            span:nth-child(1) {
                font-size: 14px;
                margin-left: 10px;
            }
        }
    }
</style>